<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html lang="en">
 <head>
  <title>CSS inline background policy: bounding-box, animated position test</title>
  <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
  <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/background/inline/policy/bounding-box/005.html"/>
    <style type="text/css">
   #test {
     background: url(/resources/images/smallcats) no-repeat;
     -moz-background-inline-policy: bounding-box;
     background-position: 50% 0%;
   }
   p {
     width: 50%; margin: 2em 10%;
   }
  </style>
  <script type="text/javascript">
   var x = 500; var vx = 3; var ax = 0;
   var y = 0; var vy = 0; var ay = 1;
   function test() {
     x += vx;
     if ((x < 0) || (x > 1000)) {
       vx = -vx;
     } else {
       vx += ax;
     }
     y += vy;
     if (y >= 1000) {
       vy = -vy;
     } else {
       vy += ay;
     }
     document.styleSheets[0].cssRules[0].style.backgroundPosition = x/10 + '% ' + y/10 +'%';
     document.getElementById('status').firstChild.data = document.styleSheets[0].cssRules[0].style.backgroundPosition;
   }
  </script>
 </head>
 <body onload="var query = location.search; if (query) { query = query.substring(1, query.length); } else { query = 10 } setInterval(test, query)">
  <p> Topsy and Turvy should be boucing up and down around the text below. </p>
  <p> <span id="test">
   filler text filler text filler text filler text filler text filler
   text filler text filler text filler text filler text filler text
   filler text filler text filler text filler text filler text filler
   text filler text filler text filler text filler text filler text
   filler text filler text filler text filler text filler text filler
   text filler text filler text filler text filler text filler text
   filler text filler text filler text filler text filler text filler
   text filler text filler text filler text filler text filler text
   filler text filler text filler text filler text filler text filler
   text filler text filler text filler text filler text filler text
   filler text filler text filler text filler text filler text filler
   text filler text filler text filler text filler text filler text
   filler text filler text filler text filler text filler text filler
   text filler text filler text filler text filler text filler text
   filler text filler text filler text filler text filler text filler
   text filler text filler text filler text filler text filler text
   filler text filler text filler text filler text filler text filler
   text filler text filler text filler text filler text filler text
   filler text filler text filler text filler text filler text filler
   text filler text filler text filler text filler text filler text
   filler text filler text filler text filler text filler text filler
   text filler text filler text filler text filler text filler text
   filler text filler text filler text filler text filler text filler
   text filler text filler text filler text filler text filler text
   filler text filler text filler text filler text filler text filler
   text filler text filler text filler text filler text filler text
   filler text filler text filler text filler text filler text </span>
  </p>
  <p>Position: <span id="status">50% 0%</span></p>
 </body>
</html>
